<app-page-header [headerTitle]="pageTitle" [headerIcon]="pageIcon"></app-page-header>
<div class="padding-15">
    <form [formGroup]="namespaceForm" novalidate>
        <div class="form-group">
            <label for="nameInput">Name <span class="required">*</span></label>
            <input type="text"
                  id="nameInput"
                  name="name"
                  class="form-control"
                  required
                  placeholder="Name"
                  formControlName="name">
        </div>
        <div class="form-group">
            <label for="descriptionInput">Description <span class="required">*</span></label>
            <input type="text"
                   id="descriptionInput"
                   name="description"
                   class="form-control"
                   required
                   placeholder="Description"
                   formControlName="description">
        </div>
        <div class="form-group">
            <label for="companyInput">Company</label>
            <input type="text"
                   id="companyInput"
                   name="company"
                   class="form-control"
                   placeholder="Company Name"
                   formControlName="company">
        </div>
        <div class="form-group">
            <label for="locationInput">Location</label>
            <input type="text"
                   id="locationInput"
                   name="location"
                   class="form-control"
                   placeholder="City, State/Provence Country"
                   formControlName="location">
        </div>
        <div class="form-group">
            <label for="avatarUrlInput">Avatar URL</label>
            <input type="url"
                   id="avatarUrlInput"
                   name="avatar_url"
                   class="form-control"
                   placeholder="Avatar URL"
                   formControlName="avatar_url">
        </div>
        <div class="form-group">
            <label for="emailInput">Email</label>
            <input type="email"
                   id="emailInput"
                   name="email"
                   class="form-control"
                   placeholder="Email address"
                   formControlName="email">
        </div>
        <div class="form-group">
            <label for="htmlUrlInput">Web Site</label>
            <input type="url"
                   id="htmlUrlInput"
                   name="html_url"
                   class="form-control"
                   placeholder="Web Site URL"
                   formControlName="html_url">
        </div>

        <div class="form-group">
            <label>Contributor Type</label>
            <div class="border-box">
                <label for="namespaceType" class="radio-inline">
                <input type="radio" name="namespaceType" value="community"
                       formControlName="namespaceType"> Community
                </label>
                <label for="namespaceType" class="radio-inline">
                <input type="radio" name="namespaceType" value="vendor"
                       formControlName="namespaceType"> Partner
                </label>
            </div>
        </div>

        <div class="form-group">
            <label>Namespace Owners</label>
            <div class="row">
                <div class="col-sm-6">
                    <label class="sub-label">Galaxy Users</label>
                    <div class="item-select">
                        <div class="filter-group">
                            <pfng-filter [config]="userFilterConfig"
                                         (onChange)="userFilterChanged($event)"></pfng-filter>

                        </div>
                        <div class="item-content">
                            <div class="icon-loading" *ngIf="usersLoading"><span class="fa fa-spinner fa-spin fa-2x"></span></div>
                            <ul>
                                <li *ngFor="let user of users; index as i" (click)="toggleUser(user.id)" >
                                    <input *ngIf="user.selected" type="checkbox" class="form-control" checked>
                                    <input *ngIf="!user.selected" type="checkbox" class="form-control">
                                    <img class="avatar" src="{{ user.avatar_url }}" >
                                    <span class="username">{{ user.username }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="sub-label">Selected Galaxy Users</label>
                    <div class="selected-items">
                        <ul>
                            <li *ngFor="let owner of this.selectedUsers; index as i">
                                <a style="cursor:pointer" class="remove-item" (click)="toggleUser(owner.id)"><span class="pficon pficon-close"></span></a>
                                <img class="avatar" src="{{ owner.avatar_url }}" >
                                <span class="username">{{ owner.username }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label>Provider Namespaces <span class="required">*</span></label>
            <div class="row">
                <div class="col-sm-6">
                    <label class="sub-label">Available Namespaces</label>
                    <div class="item-select">
                        <div class="filter-group">
                            <pfng-filter [config]="namespaceFilterConfig"
                                         (onChange)="namespaceFilterChanged($event)"></pfng-filter>
                        </div>
                        <div class="item-content">
                            <div class="icon-loading" *ngIf="namespacesLoading"><span class="fa fa-spinner fa-spin fa-2x"></span></div>
                            <ul>
                                <li *ngFor="let namespace of providerSourcesFiltered; index as i" (click)="toggleNamespace(namespace.name, namespace.provider)" >
                                    <input *ngIf="namespace.selected" type="checkbox" class="form-control" checked>
                                    <input *ngIf="!namespace.selected" type="checkbox" class="form-control">
                                    <img class="avatar" src="{{ namespace.avatar_url }}" >
                                    <span class="name">{{ namespace.name }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="sub-label">Selected Provider Namespaces</label>
                    <div class="selected-items">
                        <ul>
                            <li *ngFor="let namespace of this.selectedNamespaces; index as i">
                                <a style="cursor:pointer" class="remove-item"
                                   (click)="toggleNamespace(namespace.name, namespace.provider)"><span class="pficon pficon-close"></span></a>
                                <img class="avatar" src="{{ namespace.avatar_url }}" >
                                <span class="names">{{ namespace.name }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row form-buttons">
            <div class="col-sm-12">
                <button type="button" class="btn btn-primary btn-lg"
                        tooltip-placement="top"
                        uib-tooltip="Save the new namespace"
                        (click)="saveNamespace($event)"
                        [disabled]="!namespaceForm.valid || (!me.staff && !selectedNamespaces.length)"><i class="fa fa-check"></i> Save</button>
                <a [routerLink]="['/my-content']" class="btn btn-default btn-lg"
                   tooltip-placement="top"
                   uib-tooltip="Return to the previous page"><i class="fa fa-times"></i> Cancel</a>
                <div class="form-message">
                    <span class="required">*</span> Indicates a required field. Provide a value for all required fields, and correct any indicated errors before continuing.
                </div>
            </div>
        </div>
    </form>
</div>
<app-page-loading [loading]="pageLoading"></app-page-loading>
